import { AnimationDefinition } from './types';

/**
 * 默认动画配置数组
 * @description 包含所有默认动画的配置项
 */
const defaultAnimations: AnimationDefinition[] = [
  {
    /* 图标持续描边 */
    name: 'stroke-glow',
    keyframes: `
      0%, 100% {
        stroke-width: var(--tui-animation-stroke-glow-width, 1px);
        stroke: var(--tui-animation-stroke-glow-color, #ff0000);
        text-shadow: 
          1px 1px var(--tui-animation-stroke-glow-width, 1px) var(--tui-animation-stroke-glow-color, #ff0000),
          -1px -1px var(--tui-animation-stroke-glow-width, 1px) var(--tui-animation-stroke-glow-color, #ff0000),
          1px -1px var(--tui-animation-stroke-glow-width, 1px) var(--tui-animation-stroke-glow-color, #ff0000),
          -1px 1px var(--tui-animation-stroke-glow-width, 1px) var(--tui-animation-stroke-glow-color, #ff0000);
      }
    `,
    duration: 'var(--tui-animation-stroke-glow-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-stroke-glow-delay, 0s)',
    iterationCount: 'var(--tui-animation-stroke-glow-iterationCount, infinite)',
    composition: 'replace',
  },
  {
    /* 彩虹变色 */
    name: 'rainbow',
    keyframes: `
      0% { color: var(--tui-animation-rainbow-color1, #ff0000); } /* 红色 */
      14% { color: var(--tui-animation-rainbow-color2, #ff7f00); } /* 橙色 */
      28% { color: var(--tui-animation-rainbow-color3, #ffff00); } /* 黄色 */
      42% { color: var(--tui-animation-rainbow-color4, #00ff00); } /* 绿色 */
      57% { color: var(--tui-animation-rainbow-color5, #0000ff); } /* 蓝色 */
      71% { color: var(--tui-animation-rainbow-color6, #4b0082); } /* 靛蓝色 */
      85% { color: var(--tui-animation-rainbow-color7, #8b00ff); } /* 紫色 */
      100% { color: var(--tui-animation-rainbow-color1, #ff0000); } /* 回到红色 */
    `,
    duration: 'var(--tui-animation-rainbow-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-rainbow-delay, 0s)',
    iterationCount: 'var(--tui-animation-rainbow-iterationCount, infinite)',
    composition: 'replace',
  },
  {
    name: 'slide',
    keyframes: {
      'left': `
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
      `,
      'right': `
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      `,
      'top': `
        0% { transform: translateY(-100%); }
        100% { transform: translateY(100%); }
      `,
      'bottom': `
        0% { transform: translateY(100%); }
        100% { transform: translateY(-100%); }
      `
    },
    duration: 'var(--tui-animation-slide-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-slide-delay, 0s)',
    iterationCount: 'var(--tui-animation-slide-iterationCount, infinite)',
    composition: 'accumulate',
  },
  {
    /* 闪烁 */
    name: 'flash',
    keyframes: `
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    `,
    duration: 'var(--tui-animation-flash-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-flash-delay, 0s)',
    iterationCount: 'var(--tui-animation-flash-iterationCount, infinite)',
    composition: 'replace'
  },
  {
    /* 显示消失 */
    name: 'show-hide',
    keyframes: `
      0%, 100% { opacity: 0; }
      20%, 80% { opacity: 1; }
    `,
    duration: 'var(--tui-animation-show-hide-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-show-hide-delay, 0s)',
    iterationCount: 'var(--tui-animation-show-hide-iterationCount, infinite)',
    composition: 'replace'
  },
  {
    name: 'fade',
    keyframes: {
      out: `
        0%, 50% { opacity: 1; }
        100% { opacity: 0; }
      `,
      in: `
        0%, 50% { opacity: 0; }
        100% { opacity: 1; }
      `,
    },
    duration: 'var(--tui-animation-fade-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-fade-delay, 0s)',
    iterationCount: 'var(--tui-animation-fade-iterationCount, infinite)',
    composition: 'replace'
  },
  {
    name: 'slide-pause-slide',
    keyframes: {
      left: `
        0% { transform: translateX(100%); }
        20% { transform: translateX(0); }
        80% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
      `,
      right: `
        0% { transform: translateX(-100%); }
        20% { transform: translateX(0); }
        80% { transform: translateX(0); }
        100% { transform: translateX(100%); }
      `,
      up: `
        0% { transform: translateY(-100%); }
        20% { transform: translateY(0); }
        80% { transform: translateY(0); }
        100% { transform: translateY(100%); }
      `,
      top: `
        0% { transform: translateY(-100%); }
        20% { transform: translateY(0); }
        80% { transform: translateY(0); }
        100% { transform: translateY(100%); }
      `,
      down: `
        0% { transform: translateY(100%); }
        20% { transform: translateY(0); }
        80% { transform: translateY(0); }
        100% { transform: translateY(-100%); }
      `,
      bottom: `
        0% { transform: translateY(100%); }
        20% { transform: translateY(0); }
        80% { transform: translateY(0); }
        100% { transform: translateY(-100%); }
      `,
    },
    duration: 'var(--tui-animation-slide-left-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-slide-left-delay, 0s)',
    iterationCount: 'var(--tui-animation-slide-left-iterationCount, infinite)',
    composition: 'accumulate',
  },
  {
    /* 缩放 */
    name: 'zoom',
    keyframes: {
      default: `
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.5); }
      `,
      plus: `
        0% { transform: scale(0.5); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1.5); }
      `,
      minus: `
        0% { transform: scale(1.5); }
        50% { transform: scale(1.3); }
        100% { transform: scale(0.5); }
      `
    },
    duration: 'var(--tui-animation-zoom-duration, 1s)',
    timingFunction: 'ease-in-out',
    delay: 'var(--tui-animation-zoom-delay, 0s)',
    iterationCount: 'var(--tui-animation-zoom-iterationCount, infinite)',
    composition: 'add'
  },
  {
    /* 发光 */
    name: 'glow',
    keyframes: `
      0%, 100% {
        filter: drop-shadow(0 0 5px var(--tui-animation-glow-color-start, rgba(255, 255, 0, 0.5)));
      }
      50% {
        filter: drop-shadow(0 0 20px var(--tui-animation-glow-color-end-inner, rgba(255, 255, 0, 0.8)))
          drop-shadow(0 0 30px var(--tui-animation-glow-color-end-outer, rgba(255, 255, 0, 0.6)));
      }
    `,
    duration: 'var(--tui-animation-glow-duration, 1s)',
    timingFunction: 'ease-in-out',
    delay: 'var(--tui-animation-glow-delay, 0s)',
    iterationCount: 'var(--tui-animation-glow-iterationCount, infinite)',
    composition: 'replace'
  },
  {
    /* 旋转 */
    name: 'spin',
    keyframes: {
      default: `
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      `,
      reverse: `
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
      `,
    },
    duration: 'var(--tui-animation-spin-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-spin-delay, 0s)',
    iterationCount: 'var(--tui-animation-spin-iterationCount, infinite)',
    composition: 'add'
  },
  {
    /* 旋转指定角度 */
    name: 'spin-deg',
    keyframes: {
      default: `
        from { transform: rotate(var(--tui-animation-spin-deg-start, 0deg)); }
        to { transform: rotate(var(--tui-animation-spin-deg-end, 180deg)); }
      `,
      reverse: `
        from { transform: rotate(var(--tui-animation-spin-deg-start, 0deg)); }
        to { transform: rotate(calc(var(--tui-animation-spin-deg-end, 180deg) * -1)); }
      `,
    },
    duration: 'var(--tui-animation-spin-deg-duration, 1s)',
    timingFunction: 'linear',
    delay: 'var(--tui-animation-spin-deg-delay, 0s)',
    iterationCount: 'var(--tui-animation-spin-deg-iterationCount, 1)',
    composition: 'add'
  },
  {
    /* 弹跳 */
    name: 'bounce',
    keyframes: `
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(var(--tui-animation-bounce-height, -20px)); }
      `,
    duration: 'var(--tui-animation-bounce-duration, 1s)',
    timingFunction: 'ease',
    delay: 'var(--tui-animation-bounce-delay, 0s)',
    iterationCount: 'var(--tui-animation-bounce-iterationCount, infinite)',
    composition: 'accumulate'
  },
  {
    /* 抖动 */
    name: 'shake',
    keyframes: `
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-3px) rotate(-4deg); }
      75% { transform: translateX(3px) rotate(4deg); }
    `,
    duration: 'var(--tui-animation-shake-duration, 1s)',
    timingFunction: 'ease-in-out',
    delay: 'var(--tui-animation-shake-delay, 0s)',
    iterationCount: 'var(--tui-animation-shake-iterationCount, infinite)',
    composition: 'accumulate'
  },
  {
    /* 翻转 */
    name: 'flip',
    keyframes: {
      X: `
        0% { transform: rotateX(0deg); }
        50% { transform: rotateX(180deg); }
        100% { transform: rotateX(360deg); }
      `,
      Y: `
        0% { transform: rotateY(0deg); }
        50% { transform: rotateY(180deg); }
        100% { transform: rotateY(360deg); }
      `,
    },
    duration: 'var(--tui-animation-flip-duration, 1s)',
    timingFunction: 'ease-in-out',
    delay: 'var(--tui-animation-flip-delay, 0s)',
    iterationCount: 'var(--tui-animation-flip-iterationCount, infinite)',
    composition: 'accumulate'
  },
  {
    /* 颤抖 */
    name: 'shiver',
    keyframes: `
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      5% { transform: translate(-3px, 2px) rotate(-2deg); }
      10% { transform: translate(2px, -3px) rotate(1.5deg); }
      15% { transform: translate(-2px, 1px) rotate(-1deg); }
      20%, 30% { transform: translate(0, 0) rotate(0deg); }
      35% { transform: translate(3px, -1px) rotate(2deg); }
      40% { transform: translate(-1px, 3px) rotate(-1.5deg); }
      45% { transform: translate(2px, -2px) rotate(1deg); }
      50%, 60% { transform: translate(0, 0) rotate(0deg); }
      65% { transform: translate(-3px, -2px) rotate(-2deg); }
      70% { transform: translate(1px, 3px) rotate(1.5deg); }
      75% { transform: translate(-2px, -1px) rotate(-1deg); }
      80%, 90% { transform: translate(0, 0) rotate(0deg); }
    `,
    duration: 'var(--tui-animation-shiver-duration, 1s)',
    timingFunction: 'ease-in-out',
    delay: 'var(--tui-animation-shiver-delay, 0s)',
    iterationCount: 'var(--tui-animation-shiver-iterationCount, infinite)',
    composition: 'accumulate'
  }
];

export default defaultAnimations;
